<template>
    <v-dialog width="380px" overlay-opacity="0.2">
        <v-overlay :value="overlay">
            <v-progress-circular indeterminate size="50"></v-progress-circular>
        </v-overlay>
        <template v-slot:activator="{ on, attrs }">
            <v-btn
                    color="success"
                    outlined
                    v-bind="attrs"
                    v-on="on"
                    class="ml-2"
            >
                注册
            </v-btn>
        </template>
        <div style="background: white" @keydown.enter="register">
            <v-form ref="form">
                <v-container fluid>
                    <v-row>
                        <v-col cols="12" class="text-center text-h5">
                            用户注册
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <v-text-field
                                    label="用户名"
                                    v-model="regData.username"
                                    :rules="[usernameRule]"
                                    autofocus
                            >
                            </v-text-field>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <v-text-field
                                    ref="email"
                                    label="邮箱"
                                    v-model="regData.email"
                                    :rules="[emailRule]"
                            >
                            </v-text-field>
                        </v-col>
                    </v-row>
                    <my-password-input :password.sync="regData.password"></my-password-input>
                    <v-row>
                        <v-col cols="7">
                            <v-text-field
                                    label="验证码"
                                    v-model="regData.verificationCode"
                                    :rules="[verificationRule]"
                            >
                            </v-text-field>
                        </v-col>
                        <v-col cols="5">
                            <v-btn
                                    id="codeBtn"
                                    @click="getCode"
                                    class="mt-3"
                                    color="warning"
                                    outlined
                                    block
                                    :loading="codeBtn.loading"
                                    :disabled="!codeBtn.flag"
                            >
                                {{codeBtn.text}}
                            </v-btn>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <v-btn color="primary" block @click="register">
                                注册
                            </v-btn>
                        </v-col>
                    </v-row>
                </v-container>
            </v-form>
        </div>
    </v-dialog>


</template>

<script>
    import {verificationRule, passwordRule, emailRule, usernameRule} from "../../util/rule";
    import MyPasswordInput from "../common/MyPasswordInput";

    export default {
        name: "RegisterDialog",
        components: {MyPasswordInput},
        data() {
            return {
                regData: {
                    username: '',
                    email: '',
                    password: '',
                    verificationCode: ''
                },
                codeBtn: {
                    flag: true,
                    loading: false,
                    text: '获取验证码'
                },
                overlay: false,
                emailRule,
                usernameRule,
                passwordRule,
                verificationRule
            }
        },
        methods: {
            getCode() {
                let _this = this;
                if (_this.$refs.email.validate()) {
                    _this.codeBtn.loading = true;
                    _this._get({
                        url: 'open/get-verification-code',
                        params: {
                            email: _this.regData.email,
                            isRegister: true
                        }
                    }).then((rsp) => {
                        let code = rsp.data.code;
                        if (code === '00000') {
                            _this.$success({message: '验证码发送成功'});
                            // 调用按钮倒计时
                            _this.countDown();
                        } else {
                            _this.$error({message: rsp.data.msg});
                        }
                    }).catch((error) => {
                        console.log(error)
                        _this.$error({message: '服务器繁忙'});
                    }).finally(() => {
                        _this.codeBtn.loading = false
                    })
                }
            },
            countDown() {
                let _this = this;
                // 禁用codeBtn
                _this.codeBtn.flag = false;
                _this.codeBtn.text = 60;
                // 倒计时任务
                let interval = setInterval(() => {
                    if (_this.codeBtn.text === 1) {
                        _this.codeBtn.text = '获取验证码';
                        _this.codeBtn.flag = true;
                        clearInterval(interval);
                        return;
                    }
                    _this.codeBtn.text--
                }, 1000);
            },
            register() {
                if (this.$refs.form.validate()) {
                    let _this = this;
                    _this.overlay = true;
                    _this._post({
                        url: 'open/register-user',
                        data: _this.regData
                    }).then((rsp) => {
                        let code = rsp.data.code;
                        if (code === '00000') {
                            // 注册成功刷新页面
                            _this.$success({message: '注册成功'});
                            setTimeout(() => {
                                location.reload()
                            }, 1000)
                        } else {
                            _this.$error({message: rsp.data.msg});
                        }
                    }).catch((error) => {
                        console.log(error);
                        _this.$error({message: '服务器繁忙'});
                    }).finally(() => {
                        _this.overlay = false;
                    })
                }
            }
        }
    }
</script>

<style scoped>

</style>